<template>
	<div class="container">
		<van-sticky>
			<van-nav-bar
			  title="商品列表"
			  left-text="返回"
			  left-arrow
			  @click-left="onClickLeft"
			/>
		</van-sticky>
		<!-- 标题 -->
		<div class="classify-title">{{navList.title && navList.title.replace('分类', '')}}</div>
		
		<van-tabs v-model="tabVal" title-active-color="#07c160" color="#4ABF5C">
		  <van-tab v-for="item in navList.data" :key="item.id" :title="item.product_content" :name="item.product_content"></van-tab>
		</van-tabs>

		<div class="classify-sort f-row-around">
			<div :class="{'selectActive' : selectContent == '推荐'}" @click="onSelectColor($event)">推荐</div>
			<div :class="{'selectActive' : selectContent == '价格'}" @click="PriceSort($event)">价格</div>
			<div :class="{'selectActive' : selectContent == '新品'}" @click="onSelectColor($event)">新品</div>
		</div>
		
		<div class="list">
			<like-list :classify-list = 'classifyList'></like-list>
		</div>
		 
	</div>
</template>

<script>
	import likeList from '../components/cart/like-list.vue'
	export default{
		data(){
			return {
				tabVal : '',
				Isload : true,
				navList : [],
				
				// 请求的数据
				classifyList :  [],
				
				// 选中的颜色
				selectContent : '推荐',
				
				//切换排序
				toggleSort : false,
			}
			
		},
		created() {
			let catId = this.$route.query.cat_id;
			//请求分类数据
			this.axios.get('/api_goods', {
				params : {
					catId : catId,
					page : 1,
					pagesize : 4,				
				}
			}).then((val) => {
				let {data} = val;
				if(data.code != 0){
					console.log(data);
					return;
				};
				//修改数据
				this.classifyList = data.data;
			})
				
			//请求右所有分类和详细分类
			this.axios.get('/api_classify').then((result)=>{
				let {data} = result;
				if(data.code != 0){
					console.log(data);
					return;
				};
				data.data.forEach((item) => {
					if(item.cat_id == catId){
						this.navList = item;
						return;
					};
				});	
				
			});
		},
		computed:{
			imgHeight(){
				let windowW = document.documentElement.clientWidth - 24;
				return windowW * 0.49;
			},
		},
		components :{
			likeList
		},
		methods : {
			onClickLeft(){
				this.$router.go(-1);
			},
			arrObjSort(property, toggle){
				return function(a, b){
					let val1 = a[property];
					let val2 = b[property];
					return toggle ? val1 - val2 : val2 - val1;
				};
			},
			PriceSort(e){
				this.selectContent=e.target.innerText;
				//点击切换数据 ： true或false
				this.toggleSort = !this.toggleSort;
				
				this.classifyList.sort(this.arrObjSort('price', this.toggleSort));
			},
			onSelectColor(e){
				this.selectContent=e.target.innerText;   
			}
		},
	}
</script>

<style scoped lang="less">
	.container{
		position: absolute;
		left: 0px;
		top: 0px;
		width:100%;
		height:100%;
		z-index: 100;
		background-color:#FFFFFF ;
		.classify-title{
			text-align: center;
			line-height: 36px;
		}
		.classify-sort{
			padding: 12px 0px;
			border-top: 2px solid #eee;
			border-bottom: 2px solid #eee;
			margin-bottom: 16px;
		}
		.selectActive{
			color:#07c160;
		}
		.list{
			padding:12px;
		}
	}
</style>
